<script setup lang="ts">
import { ref } from 'vue'
import TnTabbar from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar-item.vue'
import TnNotify from '@tuniao/tnui-vue3-uniapp/components/notify/src/notify.vue'
import Home from './home.vue'
import User from './user.vue'

import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp'

const notifyRef = ref<TnNotifyInstance>()

const tableIndex = ref<string | number>(0)

const tabbarChangeEvent = (index: string | number) => {
  tableIndex.value = index
}
</script>

<template>
  <view class="tn-flex tn-flex-column tn-w-full tn-h-screen">
    <view class="tn-flex-grow tn-w-full">
      <Home v-if="tableIndex === 0" />

      <User v-if="tableIndex === 1" />
    </view>

    <view>
      <TnTabbar fixed safe-area-inset-bottom @change="tabbarChangeEvent">
        <TnTabbarItem text="首页" icon="home" active-icon="home-fill" />
        <TnTabbarItem text="我的" icon="my" active-icon="my-fill" />
      </TnTabbar>
    </view>
  </view>

  <TnNotify ref="notifyRef" />
</template>

<style lang="scss" scoped></style>
